<template>
    <Viewport title="CloudMusic" icon="/src/assets/icons/cloudmusic.png" :disable="false" :class="{'z-40': focus}" @muti="muti" @cancel="cancel" @mousedown="changeFocus">
        <iframe class=" w-full h-full bg-gray-50" src="http://82.157.137.133:8888/"
        sandbox="allow-forms
             allow-scripts
              allow-same-origin
               allow-popups 
               allow-top-navigation">

        </iframe>
    </Viewport>
</template>

<script setup>
import {computed} from 'vue';
import Viewport from '../components/Viewport.vue';
import {store} from '../store/index';

const focus = computed(() => store.state.focus === 'CLOUDMUSIC')
    const muti = () => store.commit('CHANGE_CLOUDMUSIC_SHOW', false)
    const cancel = () => {
        store.commit('CHANGE_CLOUDMUSIC_ACTIVE', false)
        store.commit('CHANGE_CLOUDMUSIC_SHOW', true)
    }
    const changeFocus = () => {
        store.commit('CHANGE_FOCUS', 'CLOUDMUSIC')
        console.log(1, store.state.focus)
    } 



</script>
